<template>
	<!--投资弹性系数-->
	<div class="economic-investment">
		<div class="chartSBox1" v-if="tabIndex===0">
			<div class="topBox">
				<el-row>
					<el-col span="12">
						<div style="margin:0 .5vw">
							<chart-block chartID="chart1" :title="PolarBarOptionData.title" :optionData="PolarBarOptionData" chartType="getpolarBar" height="37vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="blueBig"></chart-block>
						</div>
					</el-col>
					<el-col span="12">
						<div style="margin:0 .5vw">
							<chart-block chartID="chart2" :title="DoublePictorialBarOptionData.title" :optionData="DoublePictorialBarOptionData" chartType="getDoublePictorialBar" height="37vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="blueBig"></chart-block>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="bottomBox">
				<el-col span="12">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart3" :title="lineOptionData.title" :optionData="lineOptionData" chartType="getLine" height="42vh" style="padding:0 1vh 2vh 0" titleType="blueBig"></chart-block>
					</div>
				</el-col>
				<el-col span="12">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart4" :title="InfeedBarOptionData.title" :optionData="InfeedBarOptionData" chartType="getInfeedBar" height="42vh" style="padding:0 1vh 2vh 0" titleType="blueBig"></chart-block>
					</div>
				</el-col>
			</div>
		</div>
		<div class="chartSBox2" v-if="tabIndex===1">
			<el-row>
				<el-col span="12">
					<div style="margin:0 .5vw;">
						<normal-block :title="TwowayBarOptionData.title" height="85vh" style="margin-top:1vh;overflow: hidden;" titleType="moreBlueBig">
							<template>
								<div class="leftTwobar" :style="{padding:paddingSet}">
									<li v-for="(item,index) in leftList" :key="index">
										<div>
											<span class="img" :style="{background:index===0?'linear-gradient(to bottom, #51E6AC 0%,#27B475 100%)':index>0&&index<5?'linear-gradient(to bottom, #EDB846 0%,#EB7D41 100%)':'linear-gradient(to bottom, #A7A7FB 0%,#7E7EFF 100%)'}">
												<img :src="index===0?img1:index>0&&index<5?img2:img3" alt="">
											</span>
											<span class="text" :style="{color:index===0?'#27B475':index>0&&index<5?'#EB7D41':'#7E7EFF','background-image':index===0?'linear-gradient(to bottom, #51E6AC 10%,#27B475 100%)':index>0&&index<5?'linear-gradient(to bottom, #EDB846 10%,#EB7D41 100%)':'linear-gradient(to bottom, #A7A7FB 10%,#7E7EFF 100%)'}">{{ item }}</span>
										</div>
									</li>
								</div>
								<div class="rightTwobar">
									<chart-block chartID="chart5" :title="TwowayBarOptionData.title" :optionData="TwowayBarOptionData" chartType="getTwowayBar" height="80vh" style="background:rgba(12,51,127,0);border:none;box-shadow: none;" :isTitle="false"></chart-block>
								</div>
							</template>
						</normal-block>
					</div>
				</el-col>
				<el-col span="12">
					<div style="margin:.5vw">
						<chart-block chartID="chart6" :title="barBlockOptionData.title" :optionData="barBlockOptionData" chartType="getBarBlock" height="85vh" style="margin-top:1vh" titleType="moreBlueBig"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="tebBox">
			<li v-for="(item,index) in tabBox" :key="index" :class="{active:tabIndex===index}" @click="tabClick(index)"></li>
		</div>
	</div>
</template>

<script>
import {getInvestment, getInvestment1, getInvestment2, getInvestment3, getInvestment4, getInvestment5} from '@/api/pages.js'

export default {
	name: "investment",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
		NormalBlock: () => import('@/components/normal-block'),
	},
	props: {},
	data() {
		return {
			img1: require('../../../assets/images/leaf.png'),
			img2: require('../../../assets/images/car.png'),
			img3: require('../../../assets/images/xinhao.png'),
			tabIndex: 0,
			paddingSet: window.innerWidth > 1366 ? '1.5vh .5vw 3.15vh 1vw' : '1.5vh .5vw 4vh 1vw',
			tabBox: [1, 2],
			InfeedBarOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			DoublePictorialBarOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#4760FF',
						bottomColor: '#0DCCFF'
					},
					{
						topColor: '#FD644F',
						bottomColor: '#F28E26'
					},
				],
			},
			PolarBarOptionData: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			lineOptionData: {
				color: ['#32e9f4', '#f1db25', '#fc684b'],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			leftList: [],
			TwowayBarOptionData: {},
			barBlockOptionData: {},
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getInvestment('E024')
		this.getInvestment1('E025')
		this.getInvestment2('E030')
		this.getInvestment3('E031')
		this.getInvestment4('E055')
		this.getInvestment5('E032')
	},
	methods: {
		tabClick(index) {
			this.tabIndex = index
		},
		// 经济指标挖掘分析-投资弹性系数-固定资产投资总额变化
		getInvestment(busiCode) {
			getInvestment(busiCode).then(res => {
				if (res.data.code === 200) {
					this.PolarBarOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData[0].data,
						unit: res.data.data.seriesData[0].unit,
						topColor: '#f4a95b',
						bottomColor: '#12a4dc'
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-投资弹性系数-固定资产投资增长速度变化
		getInvestment1(busiCode) {
			getInvestment1(busiCode).then(res => {
				if (res.data.code === 200) {
					this.DoublePictorialBarOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						// legendPostion:'center',
						LinearGradientColor: [//柱状图渐变色
							{
								topColor: '#4760FF',
								bottomColor: '#0DCCFF'
							},
							{
								topColor: '#FD644F',
								bottomColor: '#F28E26'
							},
						],
						LineCircleColor: '',
						LineCircleBorderColor: ''
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-投资弹性系数-三次产业固定资产投资增速变化
		getInvestment2(busiCode) {
			getInvestment2(busiCode).then(res => {
				if (res.data.code === 200) {
					this.lineOptionData = {
						color: ['#32e9f4', '#f1db25', '#fc684b'],
						title: res.data.data.title,
						// legendPosition:'center',
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-投资弹性系数-房地产开发投资
		getInvestment3(busiCode) {
			getInvestment3(busiCode).then(res => {
				if (res.data.code === 200) {
					this.InfeedBarOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData[0].data,
						unit: res.data.data.seriesData[0].unit,
						topColor: '#3FEFA0',
						bottomColor: '#3FEFA0'
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-投资弹性系数-2019年各行业固定资产投资增长速度
		getInvestment4(busiCode) {
			getInvestment4(busiCode).then(res => {
				if (res.data.code === 200) {
					this.leftList = res.data.data.categoryAxis
					this.TwowayBarOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis,
						seriesData: res.data.data.seriesData[0].data,
						colorList: ['#51E6AC', '#EB7D41', '#7E7EFF']
					}
				}
			}).catch(err => {

			})
		},
		// 经济指标挖掘分析-投资弹性系数-2019年各团场（镇）固定资产投资增长速度
		getInvestment5(busiCode) {
			getInvestment5(busiCode).then(res => {
				if (res.data.code === 200) {
					this.barBlockOptionData = {
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						left: 110,
						colorList: ['#EB5B46', '#20BCF6'],
						BarGradientColor: {
							topColor: '#5a42ec',//rgba(12,57,121,0.35)
							bottomColor: '#09bbfe'
						},
						sorColor: [
							{
								topColor: '#eb5b46',
								bottomColor: '#763f4e',//前五个柱子渐变色
							},
							{
								topColor: '#20bcf6',
								bottomColor: '#20bcf6',//后面的柱子渐变色
							},
						],
						symbolSize: ['123%', '100%'],
						right: 90,
						Percent: true,//右侧文字是否显示百分比
						backgroundColor: 'rgba(12,51,127,0.35)',
						backgroundSorColor: [
							{
								leftColor: 'rgba(235, 91, 70, .15)',//前五个柱子底背景渐变色
								rightColor: 'rgba(235, 91, 70, 0)'
							},
							{
								leftColor: 'rgba(0, 165, 223, .15)',//后面的柱子底背景渐变色
								rightColor: 'rgba(0, 165, 223, 0)'
							}
						]
					}
					let seriesData = []
					this.barBlockOptionData.total = Math.max(...this.barBlockOptionData.seriesData[0].data)
					this.barBlockOptionData.categoryAxis.forEach((item, index, arr) => {
						seriesData.push({name: item, value: this.barBlockOptionData.seriesData[0].data[index]})
					})
					this.barBlockOptionData.seriesData = seriesData
					this.barBlockOptionData.symbolSize = window.innerWidth <= 1400 ? ['128%', '100%'] : window.innerWidth <= 1600 ? ['124%', '100%'] : ['115%', '100%']
				}
			}).catch(err => {

			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.economic-investment {
	width: 100%;
	height: 100%;
	position: relative;

	.chartSBox1, .chartSBox2 {
		width: 100%;
		height: 100%;

		.leftTwobar {
			width: 45%;
			height: calc(100% - 4.98vh);
			float: left;
			padding: 1.5vh .5vw 3.2vh 1vw;
			display: flex;
			flex-direction: column;

			li {
				width: 100%;
				height: 100%;
				flex: 1;
				list-style: none;
				color: #fff;
				position: relative;
				padding-top: .2vh;
				box-sizing: border-box;

				div {
					width: 100%;
					position: absolute;
					top: 50%;
					transform: translate(0%, -50%);

					span.img {
						width: 1.8vw;
						height: 3.5vh;
						background: #7E7EFF;
						float: left;
						border-radius: .3vw;
						text-align: center;
						line-height: 3.9vh;
						// margin-top:.5vh;
						img {
							width: 1.2vw;
							height: 2.2vh;
							display: inline-block;
							margin-left: -0.08vw;
						}
					}

					span.text {
						width: calc(100% - 3vw);
						height: 2.8vh;
						line-height: 3.3vh;
						float: left;
						font-size: 0.85vw;
						margin-left: 1.5vh;
						overflow: hidden;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: 550;
					}
				}
			}

			li:first-child {
				div {
					span.img {
						img {
							width: .75vw;
							height: 3.3vh;
						}
					}
				}
			}
		}

		.rightTwobar {
			width: 54%;
			height: calc(100% - 4.98vh);
			float: right;
		}
	}

	.topBox {
		width: 100%;
		height: 45%;
	}

	.bottomBox {
		width: 100%;
		height: 50%;
		margin-top: 2vh
	}

	.tebBox {
		width: 100%;
		height: 3vh;
		position: absolute;
		bottom: -1.5vh;
		text-align: center;

		li {
			list-style: none;
			display: inline-block;
			width: 1.5vw;
			height: 1.5vh;
			background: #1b689b;
			cursor: pointer;
			border-radius: 10vw;
			margin: 0 .4vw;
			transition: all .1s ease;
		}

		li.active {
			width: 2vw;
			background: #35C8FE;
			box-shadow: 0px 0px 3px #35C8FE;
		}
	}
}
</style>
